<template>
	<div v-if="datas" class="pro-deta">
		<!-- 上面卡片 -->
		<TopCard v-model:activeKey="activeKey" :title="datas.appName" />
		<div v-show="activeKey == 1">
			<!-- 基本信息 -->
			<Basic />
			<!-- 配置信息 -->
			<!-- <Configure :appAccess="appAccess" /> -->
			<CofingInfo :appAccess="appAccess" />
			<!-- <Annex /> -->
			<div class="uiue-card" v-if="dataSource">
				<div class="tit">变更内容</div>
				<a-table class="mt10 mb5" :dataSource="dataSource" :columns="columns" :pagination="false"
					:scroll="{ x: 'max-content' }">
					<template #changeTerm="{ text }">
						<span>{{ zidian(text) }}</span>
					</template>
					<template #changeBeforeContent="{ text, record }">
						<span v-if="record.changeTerm == 'pcConfigauthType'">
							{{ bianli(rzzt, text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'pcConfigpendingCategory' || record.changeTerm == 'pcConfigreadingCategory'">
							{{ bianli(dbssType, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appCategory'">
							{{ bianli(yyfl, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'noAccessTypeRemark'">
							{{ bianli(wjryy, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appContact'">
							{{ xmjl(text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appAccess'">
							{{ sdjs(text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigintelPassPhoto' || record.changeTerm == 'appConfigappInterfacePhoto' || record.changeTerm == 'pcConfigpcLogo' || record.changeTerm == 'pcConfigappDesignPage' || record.changeTerm == 'pcConfigintelPassPhoto' || record.changeTerm == 'appConfigappLogo'">
							<template v-if="text">
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<AuthImg class="img-item" v-for="item in JSON.parse(text)" :key="item.url"
										:authSrc="item.url" />
								</div>
							</template>
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigltbgTestUpdateDoc' || record.changeTerm == 'appConfiganSaoDoc' || record.changeTerm == 'appConfigltbgProdUpdateDoc' || record.changeTerm == 'pcConfigpcTestDoc' || record.changeTerm == 'pcConfigpcProdTestDoc'">
							<template v-if="text">
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<div v-for="item in JSON.parse(text)" :key="item.url" @click="downloadFile(item)"
										class="file-item">
										<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name
										}}
									</div>
								</div>
							</template>
						</span>
						<span v-else-if="is12.includes(record.changeTerm)">
							{{ text == '1' ? '是' : '否' }}
						</span>
						<span v-else>
							{{ text }}
						</span>
					</template>
					<template #changeAfterContent="{ text, record }">
						<span v-if="record.changeTerm == 'pcConfigauthType'">
							{{ bianli(rzzt, text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'pcConfigpendingCategory' || record.changeTerm == 'pcConfigreadingCategory'">
							{{ bianli(dbssType, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appCategory'">
							{{ bianli(yyfl, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'noAccessTypeRemark'">
							{{ bianli(wjryy, text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appContact'">
							{{ xmjl(text) }}
						</span>
						<span v-else-if="record.changeTerm == 'appAccess'">
							{{ sdjs(text) }}
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigintelPassPhoto' || record.changeTerm == 'appConfigappInterfacePhoto' || record.changeTerm == 'pcConfigpcLogo' || record.changeTerm == 'pcConfigappDesignPage' || record.changeTerm == 'pcConfigintelPassPhoto' || record.changeTerm == 'appConfigappLogo'">
							<template v-if="text">
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<AuthImg class="img-item" v-for="item in JSON.parse(text)" :key="item.url"
										:authSrc="item.url" />
								</div>
							</template>
						</span>
						<span
							v-else-if="record.changeTerm == 'appConfigltbgTestUpdateDoc' || record.changeTerm == 'appConfiganSaoDoc' || record.changeTerm == 'appConfigltbgProdUpdateDoc' || record.changeTerm == 'pcConfigpcTestDoc' || record.changeTerm == 'pcConfigpcProdTestDoc'">
							<template v-if="text">
								<div v-if="text.includes('group')">
									--
								</div>
								<div v-else>
									<div v-for="item in JSON.parse(text)" :key="item.url" @click="downloadFile(item)"
										class="file-item">
										<paper-clip-outlined style="margin-right: 5px; cursor: pointer;" />{{ item.name
										}}
									</div>
								</div>
							</template>
						</span>
						<span v-else-if="is12.includes(record.changeTerm)">
							{{ text == '1' ? '是' : '否' }}
						</span>
						<span v-else>
							{{ text }}
						</span>
					</template>
					<template #action="{ record }">
						<a @click="goDetail(record)">查看</a>
					</template>
				</a-table>
			</div>
		</div>
		<ProcessHistory v-show="activeKey == 2" />
		<FlowChart v-show="activeKey == 3" />
	</div>
</template>

<script setup name="appinfoDetail">
import TopCard from '@/components/Detail/topCard.vue'
import Basic from '@/components/Detail/basic.vue'
import Annex from '@/components/Detail/annex.vue'
import Configure from '@/components/Detail/configure/index.vue'
import CofingInfo from '@/components/Detail/cofingInfo/index.vue'
import ProcessHistory from '@/components/ProcessHistory/index.vue'
import FlowChart from '@/components/FlowChart/index.vue'
import { useRoute } from 'vue-router'
import appInfoApi from '@/api/biz/appInfoApi'
import appInfoTestUrlApi from '@/api/biz/appInfoTestUrlApi'
import tool from '@/utils/tool'
import { biangeng, is12, dbssType, yyfl, rzzt, wjryy } from '@/utils/dictionary'
import AuthImg from '@/components/authImg/index.vue'
import sysConfig from '@/config/index'

const emit = defineEmits(['cancelHandel'])
const route = useRoute()
const appAccess = ref([])
// const appAccess = route.query.appAccess
const approvalType = ref(route.query.approvalType)
const isTest = route.query.isTest
const tableName = route.query.tableName
tool.session.set('approvalType', route.query.approvalType)
const datas = ref()
const dataSource = ref()
const columns = [
	{
		title: '变更字段',
		dataIndex: 'changeTerm',
		slots: { customRender: 'changeTerm' },
		width: '200px'
	},
	{
		title: '变更前',
		dataIndex: 'changeBeforeContent',
		slots: { customRender: 'changeBeforeContent' },
	},
	{
		title: '变更后',
		dataIndex: 'changeAfterContent',
		slots: { customRender: 'changeAfterContent' },
	}
]

//详情接口 调用
const detailDate = async () => {
	if (route.query.type === 'history') {
		dataSource.value = await appInfoApi.getHistory({ changeId: route.query.id })
		dataSource.value.forEach((v, i) => {
			if (v.changeTerm == 'editAppType') {
				dataSource.value.splice(i, 1)
			}
			if (v.changeTerm == 'appContact') {
				isPM()
			}
		});
		datas.value = tool.data.get('detailInfo')
		console.log(datas.value)
	} else {
		datas.value = await appInfoApi.appInfoDetail({ appId: route.query.appId, type: 1 })
		appAccess.value = datas.value.appAccess.split()
	}

}
provide('detailDate', datas)
detailDate()
const testXX = ref()
// 测试应用新增和编辑显示联通办公的二维码或链接
if (isTest) {
	appInfoTestUrlApi.appInfoTestUrlPage().then((data) => {
		testXX.value = data.records?.[0]
	})
}
const fileUrl = import.meta.env.VITE_FILE_URL_W
const setImg = (path) => {
	return `${fileUrl}/${JSON.parse(path)[0].url}`
}
const activeKey = ref('1')
const zidian = (key) => {
	let label = ''
	biangeng.find(v => {
		if (v.prop == key) {
			label = v.label
		}
	})
	return label
}
const bianli = (arr, key) => {
	let label = ''
	arr.find(v => {
		if (v.key == key) {
			label = v.label
		}
	})
	return label
}
const downloadFile = (item) => {
	if (item) {
		const fileUrl = import.meta.env.VITE_FILE_URL
		const path = item.url.includes('http://') ? item.url : `${fileUrl}/${item.url}`
		const name = item.name
		const xhr = new XMLHttpRequest()
		xhr.open('get', path)
		xhr.setRequestHeader('Token', tool.data.get('TOKEN'))
		xhr.responseType = 'blob'
		xhr.send()
		xhr.onload = function () {
			if (this.status === 200 || this.status === 304) {
				const fileReader = new FileReader()
				fileReader.readAsDataURL(this.response)
				fileReader.onload = function () {
					const a = document.createElement('a')
					a.style.display = 'none'
					a.href = this.result
					a.download = name
					document.body.appendChild(a)
					a.click()
					document.body.removeChild(a)
				}
			}
		}
	}

}

const personList = ref([])
const isPM = () => {
	appInfoApi.isPM().then((data) => {
		personList.value = data
	})
}

const xmjl = (text) => {
	let str = ''
	personList.value.forEach(v => {
		if (v.id == text) {
			str = v.name + v.phone ? v.phone : ''
		}
	})
	return str
}

const config = sysConfig.DEVICE_CONFIG
const sdjs = (data) => {
	let str = ''
	if (data) {
		if (data.includes(',')) {
			let arr = config.filter((v) => data.includes(v.key))
			str = arr.map((v) => v.txt).join()
		} else {
			str = config.find((v) => v.key === data).txt
		}
	}
	return str
}
</script>

<style lang="less" scoped>
.btn {
	text-align: right;

	.bt1 {
		margin-right: 10px;
	}
}

.btnposi {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
}

.file-item {
	color: rgb(89, 89, 89);
	cursor: pointer;
	margin-top: 4px;
}

.file-item:hover {
	color: var(--primary-color);
}
:deep(.ant-table-thead > tr > th) {
    font-weight: 600;
    width: 180px; 
    // max-width: 200px;
}
</style>
<style>
.pro-deta .ant-descriptions-row>th,
.ant-descriptions-row>td {
	padding-right: 20px;
}

</style>
